<!-- 支付 -->
<template>
	<view class="bot-wrap">
		<uni-popup @change="change" ref="popupshop" type="bottom" :animation="true" :durationAnim="250">
			<view class="popup-content detail-body" :style="{height:'65vh'}">
				<view class="vrow flex-end">
					<uni-icons class="closeicon" type="closeempty" size="24" @click="show = false" color="#999"></uni-icons>
				</view>
				<view class="pop-top" id="pop-top">
				</view>
				<view>
					<view class="mb40 flex-column fit-width flex flex-items-center flex-center">
						<view class="blod f40 mt30">向商家付款</view>
					</view>
					 <view>
						<view class="f30 mt10">金额</view>
						 <view>
							 <text class="money">¥</text>
							 <text class="paynum">{{ num }}</text>
						 </view>
						
						<view class="line"></view>
						<jia-PayKeyboard :overlayClose="false" ref="keyWord" v-model="num" @input="inp" @confirm="payHandle" @hide="hide"></jia-PayKeyboard>
					</view>
				 </view>
				</view>
		</uni-popup>
	</view>
</template>

<script>
	import JiaPayKeyboard from '@/components/jia-PayKeyboard/index.vue'
	// import {payHandle} from '@/pages/common/api.js'
	import {shopCode} from '@/pages/common/js/http.js'
	import {CreateOrder, OrderPay, OrderCancel} from '@/pages/common/api.js'
	export default {
		components: {JiaPayKeyboard},
		data () {
			return {
				show: false,
				num: ''
			}
		},
		watch: {
			show: {
				handler: function(val) {
					wx.nextTick(()=>{
			            this.$refs.popupshop[this.show ? 'open' : 'close']()
					})
				},
				immediate: true
			},
		},
		methods: {
			toPay (orderId, payParams) {
				// 调起微信支付
				return new Promise(resolve => {
					uni.requestPayment({
					  provider: 'wxpay',
					  timeStamp: payParams.timeStamp,
					  nonceStr: payParams.nonceStr,
					  package: payParams.packageValue,
					  signType: payParams.signType,
					  paySign: payParams.paySign,
					  async success(res) {
						uni.showToast({
						  title: '支付成功',
						  icon: 'success',
						});
						await OrderPay({orderId})
						resolve(true)
					  },
					  async fail(err) {
						uni.showToast({
						  title: '支付失败',
						  icon: 'none',
						});
						await OrderCancel({orderId})
						resolve(false)
					  },
					});
				})
			},
			payHandle(amount) {
				let that = this
				console.log('payHandle', amount);
				let openid = uni.getStorageSync('config-openid')
				let params = {}
				params.customerId = openid
				params.orgCode = shopCode
				params.totalNumber = 1
				params.orderType = '手动付款'
				params.totalAmount =  amount
				CreateOrder(params).then(async res => {
					console.log('payHandle', res)
					if (res.code === 20000) {
						uni.hideLoading();
						if (!res.data.prePay) {
							uni.showToast({
								title: '支付异常',
								icon: "none"
							});
							return
						}
						let paySuc = await this.toPay(res.data.orderId, res.data.prePay)
						uni.setStorageSync('pay-list', null)
						uni.$emit('refresh-list')
						if (paySuc) {
							uni.showModal({
								title: '提示',
								content: '支付成功',
								showCancel: false,
								success: function (res) {
									if (res.confirm) {
										uni.redirectTo({
											url: `/pages/order/index`
										})
									}
								}
							});
						}
					}else {
						uni.showToast({
							title: res.data,
							icon: "none"
						});
					}
				})
			},
			inp(e) {
				console.log(e);
			},
			hide() {
				this.show = false
			},
			showDetail() {
				this.show = true
				this.$refs.keyWord.open();
			},
			change(e){
			    this.show = e.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bot{
	    &-wrap{
	        position: relative;
	        position: fixed;
	        bottom: 0;
	        left: 0;
	        right: 0;
	        border: 0;
	        z-index: 200;
	    }
	}
	.pop{
	    &-top{
	        padding-bottom: 30rpx;
	    }
	    &-scroll{
	        width: 100%;
	        box-sizing: border-box;
	        height: 100%;
	        flex: 1;
	        overflow: hidden;
	    }
	    
	}
    .popup-content{
		z-index: 999;
        background-color: rgba($color: #fff, $alpha: 1.0);
        max-height: calc(80vh);
        min-height: calc(30vh);
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;
    }
	.detail-body {
		padding: 30rpx;
	}
	.logo {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		border: 1px solid #fff;
	}
	.big-img {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
	}
	.closeicon {
		z-index: 999;
	}
	.paynum {
		font-size: 100rpx;
		font-weight: 700;
	}
	.money {
		font-size: 60rpx;
		font-weight: 700;
		margin-right: 10rpx;
	}
</style>
